  <% if (obj.fonts.length) { %>
  <div class='font-family keyline-bottom' id='fontfamily-userfonts'>
    <a href='#fontfamily-userfonts' class='pad1 single-font your-font js-tab'><h4>Your fonts</h4></a>
    <div class='pin-right row1 micro pad1'><%= obj.fonts.length %> <%= obj.fonts.length > 1 ? 'fonts' : 'font' %></div>
    <% obj.fonts.forEach(function(font) { %>
    <input type='text' class='block pad0 col12 single-font user-font clean js-selectall small' style='background-image:url("/font.png?id=<%=encodeURIComponent(font)%>&style=<%=obj.id%>")' value='<%=font%>' />
    <% }); %>
  </div>
  <% } else { %>
    <div class='pad1 small keyline-bottom quiet'>To embed your own fonts in your style, add them to the style's project folder and set a <code>font directory</code> on the <code>Map</code> element.
      <div class='pad0y'>Example: </div>
      <span class='micro inline pad0x code fill-darken1 quiet round'>Map { font-directory: url("fonts/"); }</span>
    </div>
  <% } %>